<template>
  <div style="background-color: #9a979717;height:100vh;">
    <div>
      <button class="goBack" @click="goBack">
        <van-icon name="arrow-left" />
      </button>
      <div class="shpcar">
        待发货
      </div>
      <div class="edit">编辑</div>
    </div>
    <div style="margin: 10rem;">
      <div v-for="store in parsedItems " :key="store.storeName" class="caritem">
        <div>
          <span class="storename">{{ store.storeName }}</span>
        </div>
        <div v-for="item in store.items" :key="item.id" class="item">
          <van-card :num="item.num" :price="item.price" :title="item.title" :thumb="item.thumb" class="goodscard">
            <div class="desc">
              <div v-for="(value, key) in item.desc" :key="key">
                {{ key }}: {{ value }}
              </div>
            </div>
          </van-card>
        </div>
        <div style="display: flex;margin-top: 20rem;">
          <span style="margin-right: 10rem;">商家将在</span>
          <van-count-down :time="time" style="color:red;" />
          <span style="margin-left: 10rem;">内发货</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { Icon as VanIcon, Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
const time = ref(30 * 60 * 60 * 1000);
const router = useRouter();
const route = useRoute();
const items = ref([]); // 存储解析后的商品信息
const goBack = () => {
  router.push('/mine'); // 使用 router 对象的 go 方法返回上一页
};


import { useGwcStore } from '../stores/gwc'; // 确保路径正确

const gwcStore = useGwcStore();
const parsedItems = computed(() => gwcStore.groupCartItemsByStore());
// 解析传递的商品信息或从本地存储中获取
// const parsedItems = computed(() => {
//   try {
//     // 首先检查路由参数
//     const encodedPaymentData = route.query.paymentData;
//     if (encodedPaymentData) {
//       return JSON.parse(decodeURIComponent(encodedPaymentData));
//     }
//     // 如果路由参数没有商品信息，则从本地存储获取
//     const itemsString = localStorage.getItem('selectedItemsHistory');
//     if (itemsString) {
//       return JSON.parse(itemsString);
//     }
//     return [];
//   } catch (e) {
//     Toast('解析支付信息出错');
//     return [];
//   }
// });

// 在组件加载时解析商品信息
onMounted(() => {
  items.value = parsedItems.value; // 将解析后的商品信息赋值给 items
  if (items.value.length === 0) {
    Toast('暂无订单信息');
  } else {
    // 10秒后跳转到待收货页面
    setTimeout(() => {
      const itemsString = JSON.stringify(items.value);
      const encodedItems = encodeURIComponent(itemsString);

      // 保存到新的本地存储键中，例如 'selectedItemsArchive'
      localStorage.setItem('selectedItemsArchive', itemsString);

      router.push({
        path: '/receipt',
        query: { items: encodedItems }
      }).then(() => {
        // 清空路由参数
        // router.replace({ path: router.currentRoute.value.path, query: {} });

        // 清空本地存储 'selectedItemsHistory'
        localStorage.removeItem('selectedItemsHistory');

        Toast('已发货');
      });
    }, 3000); // 10000毫秒后执行跳转
  }
});
</script>
<style lang="less" scoped>
.goBack {
  position: absolute;
  top: 15px;
  /* 调整为合适的像素值 */
  left: 20px;
  /* 调整为合适的像素值 */
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 14px;
  /* 调整为合适的像素值 */
}

.shpcar {
  width: 100%;
  height: 44rem;
  text-align: center;
  font-size: 20rem;
  line-height: 44rem;
  border-bottom: 1rem solid #d1cdcd;
  color: #6f6f6f;
}

.edit {
  position: absolute;
  right: 20rem;
  top: 10rem;
  color: #6f6f6f;
}

.caritem {
  background-color: #ffffff;
  height: auto;
  border-radius: 10rem;
  margin-top: 10rem;
  padding-top: 8rem;

  .storename {
    margin-left: 17rem;
    font-weight: bold;
  }
}

.van-card {
  background: white;
  border-radius: 10rem;
}

// .van-count-down {
//   color: red;
// }</style>
